@charset "utf-8";
@import "init";
$bg_color:#ff9344;
$text_color:#494949;


@function r($px){
	@return $px/50+rem;
}


.web{
	header{
		width: 100%;
		height: r(150);
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 r(22);
		box-sizing: border-box;
		.back_box{
			text-align:center;
			a{
				line-height: r(58);
				display: block;
				width: r(124);
				height: r(58);
				border: 1px solid $bg_color;
				border-radius: 10px;
				font-size: r(26);
				color: #000000;
				text-decoration: none;
			}
		}
		
		.search_box{
			p{
				padding-right: r(70);
				font-size: r(26);
				color: #000000;
			}
		}
		
		.city_box{
			i{
				font-size: r(62);
				color: $bg_color;
			}
		
		}
			
	
	
	}

	main{
		padding: 0 r(22);
		box-sizing: border-box;
		position: absolute;
		left: 0;
		top: r(150);
		bottom: r(107);
		width: 100%;
		// background-color: #f5f5f5;
		overflow-y: auto;
		.portrait{
			display: flex;
			justify-content: space-between;
			.portrait_box{
				width: r(170);
				height: r(170);
				border-radius: 50%;
				background-color:#999;
			}
			.name{
				
				width: r(509);
				height: r(170);
				.name_box{
					display: inline-block;
					margin-top: r(30);
					p{
						font-size: r(30);
						color: black;
					}
					span{
						font-size: r(26);
						color: #9d9d9d;
					}
				}
				
				i{
					font-size: r(80);
					color: black;
					margin-left: r(220);
				}
			}
		}
	
		.middle{
			margin: r(27) 0 r(20);
			display: flex;
			justify-content: space-between;
			.review{
				width:r(194);
				height:r(140);
				background-color:#b2e0a0;
				text-align:center;
				
				i{
					font-size: r(86);
					color: white;
				}
				p{
					font-size: r(26);
					
				}
			}.review:nth-child(2){
				background-color: #a0dce0;
			}
			.review:nth-child(3){
				background-color: #e0b7a0;
			}
		}
	
		.title{
			width: 100%;
			height: r(93);
			// background-color: red;
			
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			.bulk_box{
				
				i{
					font-size: r(72);
					color: $bg_color;
					vertical-align:middle;
				}
				span{
					font-size: r(30);
					color: #000;
					vertical-align:middle;
				}
			}
		
			.more_box{
				font-size: 0;
				margin-bottom: r(20);
				i{
					font-size: r(26);
					color: $bg_color;
					vertical-align:middle;
				}
				span{
					font-size: r(26);
					color: #000;
					vertical-align:middle;
				}
			}
		}
	
		.esc{
			margin-top: r(20);
			width: 100%;
			height: r(93);
			text-align: center;
			button{
				width:r(145);
				height: r(75);
				font-size: r(24);
				color: white;
				border: none;
				background-color: $bg_color;
				border-radius: r(50);
				margin-right: r(200);
				
			}
			button:nth-child(2){
				margin: 0;
			}
		}
	
	}

	footer{
		ul{
			display: flex;
			justify-content: space-between;
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			background-color: white;
			li{
				width: 25%;
				text-align: center;
				i{
					font-size: r(72);
					color: $bg_color;
				}
				p{
					
					font-size: r(26);
					color: black;
				}
			}
		}
	}
}